<template>
	<view class="">
		<!-- v-if="spData.abbName" -->
		<view  class="content"
			v-if="spData.abbName"
			style="flex-direction: column;height: 100vh;justify-content: space-between;">
			<view class="header" style="flex:1;background: #eee;overflow: scroll;">

				<!-- <swiper v-if="picLunboList.length" class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				indicator-active-color="#ffffff" :duration="duration">
				<swiper-item v-for="(item, index) in picLunboList" :key="index" @click="clickImg(item,'1')">
					<view class="swiper-item">
						<image class="image" :src="baseUrl + item.picUrl" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper> -->
				<view style="background: #eee;padding: 10px;">
					<view style="background-color: #fff;padding: 10px">
						<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.abbName}} </view>

						<view style="display: flex;justify-content: space-between;">
							<view
								style="display: flex;flex-direction: column;justify-content: space-between;margin-right: 10px;">
								<view style="color: #aaa;">
									活动简介：{{spData.simpleContent}}
								</view>
								<view class="">
									开始时间：{{spData.beginDate?spData.beginDate.substring(0,10):''}}
								</view>
								<view class="">
									结束时间：{{spData.endDate?spData.endDate.substring(0,10):''}}
								</view>
								
								<view style="display: flex;justify-content: space-between;">
									<view>
										<text
											style="color: red;font-size: 20px;">￥{{ spData.fprice?spData.fprice:'暂无单价' }}</text>
										<!-- <text style="margin-right: 5px;">/{{spData.basInv.appUnitName}}</text> -->
										<text style="margin-right: 5px;">/{{spData.unitName}}</text>
										<text
											style="color: #aaa;text-decoration: line-through;">（原价:￥{{ spData.orgPrice?spData.orgPrice:'暂无单价' }})</text>
									</view>
								</view>
								<view style="display: flex;justify-content: space-between;">
									<view style="background:  bisque ;padding: 5px;color: #ff874b;border-radius: 5px">
										起订量：{{spData.moq}}</view>
										<view></view>
								</view>


							</view>
							<view style="width: 180rpx;height: 160rpx;background: #f9f9f9;">
								<image style="width: 180rpx;height: 160rpx;" :src="spData.picUrl?baseUrl + spData.picUrl:''"
									mode="aspectFit" ></image>
							</view>
							
						</view>


					</view>

					<view style="margin-top: 10px;padding: 20px 10px;background-color: #fff;">
						<view style="font-weight: bold;font-size: 16px;">
							主产品：
						</view>
						<view style="padding: 5px;" class="list">
							<!-- {{spData.basInv.cinvname?spData.basInv.cinvname:''}} -->
							<view class="l">
								<!-- 列表的复选框 -->
								<image :src="spData.basInv.picUrl?vuex_config.baseUrl + spData.basInv.picUrl:''" mode="aspectFit"
									class="img"></image>
							</view>
							<view class="center">
								<view class="name" style="text-align: left;">
									{{spData.basInv.cinvname}}
								</view>
								<view class="size" style="margin-top: 4%;text-align: left;margin-bottom: 15px;">
									规格：{{spData.basInv.cinvstd?spData.basInv.cinvstd:''}}
								</view>
								<view class="" style="text-align: right;">
									x {{spData.ichangrate?spData.ichangrate:''}}
								</view>
								<!-- <view class="count">
									数量：x{{item.count}}
								</view> -->
								<!-- <view class="price" style="margin-bottom:6px;">
									<div style="font-weight: 600;margin-bottom: 6px;">&yen</div>
									<div style="font-weight: 600;font-size: 20px;">{{item.sumPrice}}</div>
								</view> -->
							</view>
						</view>
						<view style="font-weight: bold;font-size: 16px;">
							赠品：
						</view>
						<view v-for="(item,index) in spData.shopProductSellInvList" :key="index" style="padding: 5px;" class="list">
							<!-- <view>存货名称：{{item.basInv.cinvname?item.basInv.cinvname:''}}</view>
							<view>规格型号：{{item.basInv.cinvstd?item.basInv.cinvstd:''}}</view>
							<view>单套数量：{{item.frate?item.frate:''}}</view> -->
							<view class="l">
								<!-- 列表的复选框 -->
								<image :src="item.basInv.picUrl?vuex_config.baseUrl + item.basInv.picUrl:''" mode="aspectFit"
									class="img"></image>
							</view>
							<view class="center">
								<view class="name" style="text-align: left;">
									{{item.basInv.cinvname}}
								</view>
								<view class="size" style="margin-top: 4%;text-align: left;margin-bottom: 15px;">
									规格：{{item.basInv.cinvstd?item.basInv.cinvstd:''}}
								</view>
								<view class="" style="text-align: right;">
									x {{item.frate?item.frate:''}}
								</view>
								<!-- <view class="count">
									数量：x{{item.count}}
								</view> -->
								<!-- <view class="price" style="margin-bottom:6px;">
									<div style="font-weight: 600;margin-bottom: 6px;">&yen</div>
									<div style="font-weight: 600;font-size: 20px;">{{item.sumPrice}}</div>
								</view> -->
							</view>
						</view>

					</view>

					<view style="margin-top: 10px;padding: 20px 10px;background-color: #fff;">
						<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">
							活动详情
						</view>
						<u-parse ref="parses" :html="spData.content"></u-parse>

					</view>

				</view>
			</view>

			<view class="navigation">
				<view class="left">
					<!-- <view class="item">
							<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">客服</view>
						</view>
						<view class="item">
							<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">店铺</view>
						</view> -->
					<view class="item car" @click="jumpCart">
						<u-badge class="car-num" :count="vuex_cartList" type="error" :offset="[-3, -6]"></u-badge>
						<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
						<view class="text u-line-1">购物车</view>
					</view>
				</view>
				<view class="right">
					<view class=" cart btn u-line-1" @click="butClick">加入购物车</view>
					<!-- <view class=" buy btn u-line-1" @click="show = true;buttext='立即购买'">立即购买</view> -->
				</view>



			</view>
			<u-popup v-model="show" mode="bottom" closeable>
				<view style="background-color: #fff;padding: 10px">
					<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">{{spData.abbName}}</view>
					<view style="display: flex;justify-content: space-between;">
						<!-- <view style="color: #aaa;">规格:{{spData.cinvstd?spData.cinvstd:''}}</view> -->
						<view
							style="background:  bisque ;font-size: 14px;padding: 3px;color: #ff874b;border-radius: 5px">
							起订量{{spData.moq}}
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;margin-top: 10px;">
						<view class="">
							<text style="color: red;font-size: 20px;">￥{{ spData.fprice?spData.fprice:'暂无单价' }}</text>
							<text>/{{spData.unitName}}</text>
						</view>
						<u-number-box input-width="120" input-height="60" v-model="spData.count" :min="1" @change="valChange"></u-number-box>
					</view>
					<view
						style="color: red;text-align: right;border-top:1px solid #aaa ;border-bottom:1px solid #aaa ;padding: 10px;margin: 10px 0;">
						合计：
						<text style="font-size: 20px;">￥{{sumPrice}}</text>
					</view>
					<view style="text-align: right;padding: 10px 0;">
						<text @click="submit"
							style="padding: 10px;background: #00aa00;color: #fff;border-radius: 5px">{{buttext}}</text>
					</view>
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				buttext: '确定',
				value: 1,
				show: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长

				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/31eeb699d9a518c5.jpg',

					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/e0a4a66f99b018ca.jpg',

					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/58abc74c60ac8c4c.jpg',

					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/c0e837336247bb4b.jpg',

					}, {
						colorClass: 'uni-bg-blue',
						url: 'https://www.mnbtdm.com/upload/images/2023/8/58abc74c60ac8c4c.jpg',

					}
				],

				spData: {},
				sumPrice: 0,
				picDetailList: [],
				picLunboList: [],
				baseUrl: ''
			}
		},
		onLoad(params) {

			this.$u.api.shop.sellSetData({
					id: params.id
				})
				.then(res => {
					console.log(res);
					this.spData = res
					this.spData.fprice = this.spData.fprice ? this.spData.fprice : '暂无单价'
					this.spData.count = 1
					this.sumPrice = this.spData.fprice * 1
					
				});
			this.baseUrl = this.vuex_config.baseUrl
		},
		mounted(){
			console.log(this.$refs.parses,'this.$refs.parse1111===');
			
			this.$refs.parses.nodes.forEach(item => {
				item.children.forEach(item2=>{
					if(item2.name == 'img'){
						if(item2.attrs.src[0] == '/'){
							item2.attrs.src = this.vuex_config.baseUrl + item2.attrs.src.slice(5) + '.png'
						}
					}
				})
			})
		},
		methods: {
			butClick(){
				if(this.spData.fprice == '暂无单价'){
					this.$u.toast('暂无单价，无法加入购物车');
				}else{
					this.buttext='加入购物车';
					this.show = true;
				}
			},
			clickImg(item, flag) {
				let arr = []
				if (flag == '1') {
					arr = [...this.picLunboList]
				} else if (flag == '2') {
					arr = [...this.picDetailList]
				}
				let urls = arr.map(val => {
					return (this.baseUrl + val.picUrl)
				})
				uni.previewImage({
					urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: this.baseUrl + item.picUrl, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			// clickImg2(item) {
			// 	console.log(item);
			// 	let urls = [item.url]
			// 	uni.previewImage({
			// 		urls,
			// 		current: item.url, 
			// 		success: function(res) {},
			// 		fail: function(res) {},
			// 		complete: function(res) {},
			// 	})
			// },

			jumpCart() {
				uni.switchTab({
				  url: '/pages/btdm/index/cart/cart'
				})
				// uni.reLaunch({
				// 	url: '/pages/btdm/index/cart/cart',
				// })
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.sumPrice = this.spData.fprice * e.value
				console.log('this.spData.count: ' + this.spData.count)
			},
			listData() {
				this.$u.api.shop.cartListData({
						cusCode: this.vuex_basCus.code,
						createBy: this.vuex_user.userCode,
					})
					.then(res => {
						let listArr = []
						for (let key in res) {
							res[key].forEach(item=>{
									listArr.push(item)
							})
						}
						this.$store.commit("modifyCartList",listArr.length)
					});
			},
			submit() {
				if (this.buttext == '立即购买') {
					this.$u.api.shop.shopCarBalanceForm({
						cusCode:this.vuex_basCus.code,
						selIds: this.spData.cinvcode
					})
					.then(res => {
						if(res.result == 'true'){
							uni.navigateTo({
								url: '/pages/btdm/index/order/submit?list=' + JSON.stringify(res.data),
							})
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none',
							});
						}
					});
				} else {
					console.log(this.spData, 'spData====');
					if (this.vuex_basCus.code && this.vuex_basCus.code != '00') {
						let data = {
							cusCode: this.vuex_basCus.code,
							busType: '1',
							busKey: this.spData.id,
							iqty: this.spData.count,
							fprice: this.spData.fprice ? this.spData.fprice : '暂无单价',
							appUnitCode:this.spData.basInv.appUnitCode,
						}
						if(data.fprice != '暂无单价'){
							this.$u.api.shop.addToCart(data)
								.then(res => {
									if (res.result == 'true') {
										this.show = false;
										setTimeout(()=>{
											this.$u.toast(res.message);
										},500)
										this.listData()
									}else{
										uni.showModal({
											title: '提示',
											content: res.message,
											showCancel: false,
											success: function(res) {}
										});
										// this.$u.toast(res.message);
									}
									console.log(res, '=========');
								});
						}else{
							this.$u.toast('暂无单价，无法加入购物车');
						}
						
					} else {
						this.$u.toast('请先选择门店');
					}
					// let flag = true;

					// let arr = this.vuex_cartList.map(item => {
					// 	if (item.id == this.spData.key) {
					// 		flag = false;
					// 		item = {
					// 			id: this.spData.key,
					// 			name: this.spData.key,
					// 			isChecked: false,
					// 			price: this.spData.cat,
					// 			count: this.spData.count,
					// 			size: '迷你',
					// 			sumPrice: this.spData.cat * this.spData.count,
					// 			stock: 11,
					// 			img: this.spData.icon
					// 		}
					// 		console.log(item, 'item==');
					// 	}
					// 	return item

					// })
					// if (flag) {
					// 	arr.unshift({
					// 		id: this.spData.key,
					// 		name: this.spData.key,
					// 		isChecked: false,
					// 		price: this.spData.cat,
					// 		count: this.spData.count,
					// 		size: '迷你',
					// 		sumPrice: this.spData.cat * this.spData.count,
					// 		stock: 11,
					// 		img: this.spData.icon
					// 	})
					// }
					// this.$store.commit("modifyCartList", arr)
					// this.show = false;
				}
			}
		},


	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 98%;
		text-align: center;
		overflow: scroll;
	}
	/deep/ .u-icon-plus{
	    width: 120rpx !important;
	}
	/deep/ .u-icon-minus {
	    width: 120rpx !important;
	}

	.list {
		width: 100%;
		// height: 208rpx;
		background: #f9f9f9;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		// border-radius: 24rpx;
		margin-top: 10px;
		padding: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.l {
			// display: flex;
			// align-items: center;
			margin-right: 10px;

			.img {
				width: 180rpx;
				height: 160rpx;
				background-color: white;
				// margin-left: 10rpx;
				border-radius: 8%;
			}
		}

		.center {
			// width: 170rpx;
			flex: 1;

			.name {
				font-size: 15px;
				font-weight: 600;
				color: #3E3E3E;
				letter-spacing: 1.86rpx;
				white-space: nowrap;
				// text-overflow: ellipsis;
				// overflow: hidden;
				// width: 170px;
				height: 50px;
				// margin-right: 118rpx;
				white-space: normal
			}

			.size {
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}

			.count {
				font-size: 22rpx;
				color: #8D8D8D;
				letter-spacing: 1.57rpx;
			}

		}

		.price {
			display: flex;
			// margin-bottom: 10rpx;
			font-size: 26rpx;
			color: red;
			letter-spacing: 0;
			margin-right: 118rpx;
			font-family: Arial;
		}
	}

	.content {
		/* text-align: center; */
		display: flex;
		flex-direction: column;
	}

	.swiper-box {
		/* object-fit: full; */
		height: 220px;
	}

	.swiper-box2 {
		/* object-fit: full; */
		/* height: 190px; */
		/* max-width:100%; */
		height: 150px;
	}

	.swiper-box3 {
		/* object-fit: full; */
		height: 146px;
		/* max-width: 100%;		 */
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #fff;
	}

	.image {
		width: 750rpx;
		height: 220px;
		/* object-fit: cover; */
	}

	.image2 {
		width: 750rpx;
		height: 150px;
		/* object-fit: cover; */
		/* object-fit: contain; */
	}

	.image3 {
		/* width: 750rpx;
		height: 1400upx; */
		/* position: fixed;
		object-fit: contain; */
		width: 750rpx;
		height: 146px;
	}

	.action {
		/* position: fixed;
			top:100px;
			z-index: 9999; */
	}

	.warp {
		color: #000000;
	}

	.leftLine {
		width: 80px;
		height: 1px;
		background: linear-gradient(244deg, rgba(26, 26, 26, 1.0) 50%, rgba(255, 255, 255, 0) 100%);
	}

	.rightLine {
		width: 80px;
		height: 1px;
		background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(26, 26, 26, 1.0) 50%);
	}

	.tag {
		margin-left: 4%;
	}

	.tag1 {
		margin-left: 5%;
	}

	.navigation {
		width: 100%;
		/* position: fixed;
		bottom: 96rpx;
		z-index: 111; */
		display: flex;
		justify-content: space-between;
		// margin-top: 100rpx;
		border: solid 1rpx #eee;
		background-color: #ffffff;
		padding: 16rpx;


		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #00aa00;
			}
		}
	}
</style>